<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <% include ../../ejs/_meta.ejs %>
    <title>收货地址</title>
    <% include ../../ejs/_css.ejs %>
    <link rel="stylesheet" type="text/css" href="../../lib/ydui.css">
    <link rel="stylesheet" type="text/css" href="../../css/address/edit.css" inline>
</head>

<body class="body-bg" ontouchstart>
<div class="m-page">
    <%-include("../../ejs/_header.ejs", {title: '收货地址'}) %>
    <section class="m-content">
        <form class="m-form" id="form">
            <div class="m-cells">
                <div class="m-cell">
                    <div class="cell-left">收货人</div>
                    <div class="cell-input">
                        <input type="text" class="m-input" id="name" name="name" placeholder="请填写姓名" required="true">
                    </div>
                </div>
                <div class="m-cell">
                    <div class="cell-left">手机号码</div>
                    <div class="cell-input">
                        <input type="tel" class="m-input" name="mobile" placeholder="请填写手机号" required="true" valid="mobile" maxlength="11">
                    </div>
                </div>
                <div class="m-cell">
                    <div class="cell-left">所在地区</div>
                    <div class="cell-input">
                        <input type="text" class="m-input" id="ssq" name="ssq" placeholder="请选择所在地区" required="true" readonly>
                    </div>
                </div>
                <div class="m-cell">
                    <div class="cell-left">详细地址</div>
                    <div class="cell-input">
                        <input type="text" class="m-input" name="detail" placeholder="请填写详细地址" required="true">
                    </div>
                </div>
            </div>
        </form>
        <!-- 新增情况 -->
        <div class="m-btn disabled" id="save">保存</div>
        <!-- 编辑情况 -->
        <!-- <div class="m-btn" id="save">保存</div> -->
    </section>
</div>
</body>

<%-include("../../ejs/_js.ejs", {env: env}) %>
<script type="text/javascript" src="../../lib/ydui.citys.js"></script>
<script type="text/javascript" src="../../lib/ydui.js"></script>
<script type="text/javascript">
$(function () {
    //- 地址ID
    var id = utils.param('id');

    //- 缓存页面元素
    var $form = $('#form');
    var $ssq = $('#ssq', $form);
    var $save = $('#save');
    var city = {};

    //- YDUI-省市区选择 START
    if (id) {
        //- 编辑状态（需设置默认city值）
        var ssq = "福建 厦门市 思明区";
        var ssqs = ssq.split(' ');
        city = { provance: ssqs[0], city: ssqs[1], area: ssqs[2] };

        $save.removeClass('disabled');
    }

    $ssq.citySelect(city);
    $ssq.on('click', function (event) {
        event.stopPropagation();
        $(this).citySelect('open');
    }).on('done.ydui.cityselect', function (ret) {
        $(this).val(ret.address).addClass('validate');
        isDisabled();
    });
    //- YDUI-省市区选择 END

    //- 必填项
    var $required = $("input[required='true']");
    var requiredLength = $required.length;

    //- 是否禁用按钮
    var isDisabled = function () {
        $save.toggleClass('disabled', $('input.validate').length < requiredLength);
    }

    //- 实时监听输入框的值
    $required.on('input propertychange', function (e) {
        $(e.target).toggleClass('validate', !!e.target.value);
        isDisabled();
    });

    //- 保存
    $save.m_touch(function () {
        if (!$(this).hasClass('disabled') && $form.m_form_valid()) {
            var params = $form.m_form_json();
            console.info(params)
            $.showLoading({text: '正在保存'});
            setTimeout(function(){
                $.hideLoading();
                $.toast('保存成功', function() {
                    jump.back();
                });
            }, 1200);
            // $.post('url', params, function (data) {

            // });
        }
    });
});
</script>

</html>
